<template>
  <view class="pages safety-150 bg-#ffffff">
    <mt-navbar title="" :show-back="false" bg-color="rgba(0,0,0,0)"> </mt-navbar>
    <view class="bg"></view>
    <view class="pt-24rpx px-32rpx relative z-2">
      <view class="text-48rpx text-#1C213E font-bold text-center mb-62rpx">欢迎注册盟商</view>
      <view class="forms">
        <uv-form ref="formRef" label-position="top" :border-bottom="true" label-width="auto" :model="modelForm" :rules="rules">
          <uv-form-item label="营业执照：" prop="businessLicenseImages" required>
            <mt-image-upload
              v-model="modelForm.businessLicenseImages"
              limit="1"
              replace
              :show-delete="false"
              width="658rpx"
              height="304rpx"
              oss-path="information"
              @upload-change="handleUploadChange"
            >
              <view class="license">
                <view class="text-center mb-24rpx pt-90rpx">
                  <image
                    class="w-62rpx h-62rpx"
                    src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-information1.svg"
                  ></image>
                </view>
                <view class="text-center text-28rpx text-#1484EE">请上传营业执照</view>
              </view>
            </mt-image-upload>
          </uv-form-item>
          <uv-form-item label="公司名称：" prop="companyName" required>
            <uv-input v-model="modelForm.companyName" maxlength="50" placeholder="请输入公司名称" border="none" clearable></uv-input>
          </uv-form-item>
          <uv-form-item label="社会信用代码：" prop="usci" required>
            <uv-input v-model="modelForm.usci" maxlength="30" placeholder="请输入社会信用代码" border="none" clearable></uv-input>
          </uv-form-item>
          <uv-form-item label="联系人：" prop="contact" required>
            <uv-input v-model="modelForm.contact" maxlength="20" placeholder="请输入联系人" border="none" clearable></uv-input>
          </uv-form-item>

          <view class="no-border">
            <uv-form-item label="联系人手机号：" prop="contactPhone" required>
              <uv-input v-model="modelForm.contactPhone" maxlength="11" placeholder="请输入联系人手机号" border="none" clearable></uv-input>
            </uv-form-item>
          </view>
        </uv-form>
      </view>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2 z-10">
      <mt-button class="w-full" shape="circle" @click="handleSubmit">提交</mt-button>
    </view>
  </view>
</template>

<script setup>
import { providerupdateRegisterInfo, providergetCompanyInfoByOCR } from '@/api/index';
import { phoneCheck } from '@/utils/regular';

const formRef = ref();
const modelForm = ref({
  companyName: '',
  usci: '',
  contact: '',
  contactPhone: '',
  businessLicenseImages: []
});
const rules = {
  companyName: {
    type: 'string',
    required: true,
    message: '请输入公司名称',
    trigger: ['blur']
  },
  usci: {
    type: 'string',
    required: true,
    message: '请输入社会信用代码',
    trigger: ['blur']
  },
  contact: {
    type: 'string',
    required: true,
    message: '请输入联系人',
    trigger: ['blur']
  },
  contactPhone: [
    {
      type: 'string',
      required: true,
      message: '请输入联系人手机号',
      trigger: ['blur']
    },
    {
      validator: (rule, value, callback) => {
        return phoneCheck(value);
      },
      message: '请输入正确的手机号',
      trigger: ['blur']
    }
  ],
  businessLicenseImages: {
    type: 'array',
    required: true,
    message: '请上传营业执照',
    trigger: ['change']
  }
};

function handleUploadChange() {
  providergetCompanyInfoByOCR({
    imageUrl: modelForm.value.businessLicenseImages[0].url
  })
    .then((res) => {
      console.log(res.data);
      modelForm.value.companyName = res.data.companyName;
      modelForm.value.usci = res.data.usci;
      modelForm.value.contact = res.data.contact;
    })
    .catch(() => {
      modelForm.value.companyName = '';
      modelForm.value.usci = '';
      modelForm.value.contact = '';
    });
}

function handleSubmit() {
  formRef.value
    .validate()
    .then(() => {
      const params = JSON.parse(JSON.stringify(modelForm.value));
      params.businessLicenseImages = params.businessLicenseImages[0].url;
      providerupdateRegisterInfo(params).then(() => {
        uni.showToast({
          icon: 'none',
          title: '操作成功',
          duration: 1000
        });
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/common/buyClue'
          });
        }, 1000);
      });
    })
    .catch((err) => {});
}
</script>

<style lang="scss" scoped>
.pages {
  min-height: calc(100vh - var(--window-top));
  box-sizing: border-box;
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 658rpx;
    background: linear-gradient(234deg, rgba(20, 132, 238, 0.05) 0%, rgba(255, 255, 255, 0.05) 100%);
  }
}
.forms {
  :deep(.uv-form) {
    .uv-form-item {
      border-bottom: 2rpx solid #e6e6e6;
    }

    .uv-form-item__body__left__content__label {
      font-size: 32rpx;
      font-weight: bold;
      padding-left: 8rpx;
    }
  }
  .no-border {
    :deep(.uv-form-item) {
      border-bottom: none;
    }
  }
  .license {
    width: 658rpx;
    height: 304rpx;
    background-image: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/information1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
</style>
